<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
	<HEAD>
		<META CONTENT="text/html; charset=UTF-8" HTTP-EQUIV="Content-Type">
		<TITLE>PI.JS > pi.element</TITLE>
		<LINK HREF="../../../inc/template.css" REL="stylesheet">
		<LINK HREF="../../../inc/template.css" REL="stylesheet">
		<SCRIPT SRC="../../../source/pi.1.1.1.js" TYPE="text/javascript"></SCRIPT>
		<SCRIPT SRC="../../../inc/template.js" TYPE="text/javascript"></SCRIPT>
		<LINK HREF="../../../inc/sh/SyntaxHighlighter.css" TYPE="text/css" REL="stylesheet">
		<SCRIPT SRC="../../../inc/sh/shCore.js" LANGUAGE="javascript"></SCRIPT>
		<SCRIPT SRC="../../../inc/sh/shBrushJScript.js" LANGUAGE="javascript"></SCRIPT>
		<SCRIPT SRC="../../../inc/sh/shBrushCss.js" LANGUAGE="javascript"></SCRIPT>
		<SCRIPT SRC="../../../inc/sh/shBrushXml.js" LANGUAGE="javascript"></SCRIPT>
		<SCRIPT SRC="../../../inc/sh/shBrushPhp.js" LANGUAGE="javascript"></SCRIPT>
		<SCRIPT SRC="../../../inc/sh/shBrushPython.js" LANGUAGE="javascript"></SCRIPT>
	</HEAD>
	<BODY>
		<A HREF="/" ID="header" CLASS="Header">
			<EM></EM>
		</A>
		<DIV CLASS="Index">
			<DIV ID="indexContainer" CLASS="ListContainer">
				<A HREF="../../../index.html" CLASS="Button "><EM>About Pi</EM></A>
				<A HREF="../../../pages/Downloads" CLASS="Button "><EM>Downloads</EM></A>
				<A HREF="../../../documentation/index.html" CLASS="Button SelectedButton"><EM>Documentation</EM></A>
				<DIV CLASS="SubNavigation">
					<DIV>
						<H2 CLASS="Title">Essential Documents</H2>
						<UL>
							<LI>
								<A STYLE="" HREF="../../../documentation/essential/Getting Started to pi.js/">Getting Started to pi.js</A>
							</LI><LI>
								<A STYLE="" HREF="../../../documentation/essential/Object Oriented Programming with pi.js/">Object Oriented Programming with pi.js</A>
							</LI>
						</UL>
					</DIV><DIV>
						<H2 CLASS="Title">Reference</H2>
						<UL>
							<LI>
								<A STYLE="" HREF="../../../documentation/env/pi.env/">pi.env</A>
							</LI><LI>
								<A STYLE="" HREF="../../../documentation/get/pi.get/">pi.get</A>
							</LI><LI>
								<A STYLE="font-weight:bold" HREF="../../../documentation/util/pi.util/">pi.util</A>
								<UL>
									<LI>
										<A HREF="../../../documentation/util/pi.util.Array/">pi.util.Array</A>
									</LI><LI>
										<A HREF="../../../documentation/util/pi.util.Element/">pi.util.Element</A>
									</LI><LI>
										<A HREF="../../../documentation/util/pi.util.Hash/">pi.util.Hash</A>
									</LI><LI>
										<A HREF="../../../documentation/util/pi.util.Number/">pi.util.Number</A>
									</LI><LI>
										<A HREF="../../../documentation/util/pi.util.String/">pi.util.String</A>
									</LI>
								</UL>
							</LI><LI>
								<A STYLE="" HREF="../../../documentation/base/pi.base/">pi.base</A>
							</LI><LI>
								<A STYLE="" HREF="../../../documentation/element/pi.element/">pi.element</A>
							</LI><LI>
								<A STYLE="" HREF="../../../documentation/xhr/pi.xhr/">pi.xhr</A>
							</LI><LI>
								<SPAN STYLE="font-weight:bold">Native Objects</SPAN>
								<UL>
									<LI>
										<A HREF="../../../documentation/Native Objects/Array/">Array</A>
									</LI><LI>
										<A HREF="../../../documentation/Native Objects/Function/">Function</A>
									</LI><LI>
										<A HREF="../../../documentation/Native Objects/Number/">Number</A>
									</LI><LI>
										<A HREF="../../../documentation/Native Objects/String/">String</A>
									</LI>
								</UL>
							</LI><LI>
								<SPAN STYLE="font-weight:bold">Plugins</SPAN>
								<UL>
									<LI>
										<A HREF="../../../documentation/plugin/pi.comet/">pi.comet</A>
									</LI><LI>
										<SPAN>pi.cache</SPAN>
									</LI><LI>
										<SPAN>pi.layer</SPAN>
									</LI><LI>
										<A HREF="../../../documentation/plugin/pi.storage/">pi.storage</A>
									</LI><LI>
										<SPAN>pi.win</SPAN>
									</LI>
								</UL>
							</LI>
						</UL>
					</DIV>
				</DIV>
				<A HREF="../../../pages/Plugins" CLASS="Button "><EM>Plugins</EM></A>
				<A HREF="http://groups.google.com/group/pi-js" CLASS="Button"><EM>Developer Forum</EM></A>
				<A HREF="http://code.google.com/p/pi-js/issues/list" CLASS="Button"><EM>Issues</EM></A>
			</DIV>
		</DIV>
		<!-- <h3 class="ContentNav" id="contentTitle">
			<div>
				<a class="Sel">index.html</a>
			</div>
		</h3>-->
		<DIV ID="documentationContent" CLASS="Content">
			<DIV CLASS="Pad">
				<H1 CLASS="Name">pi.element<EM CLASS="DocumentationTitleVersion">2009-01-06 09:23:24</EM></H1>
				<DIV>
				<H2 CLASS="Title">Summary</H2>
				pi.element, is a class which provides creating and modifying DOM elements.
				</DIV>
				<DIV CLASS="Text">
					<H2 CLASS="Title">Syntax</H2>
<PRE NAME="code" CLASS="js">
var MyForm = new pi.element("form").attribute.addClass("MyForm").child.add(
	new pi.element("label").update("Username:"),
	new pi.element("input").attribute.set("type","text"),
	new pi.element("button").event.addListener("click",function(){ 
		alert("Hello World!"); 
	}).update("Submit")
).insert(document.body);
</PRE>
The above example will output:
<PRE NAME="code" CLASS="html">
<BODY>
	<FORM CLASS="MyForm">
		<LABEL>Username:</LABEL>
		<INPUT TYPE="text">
		<BUTTON>Submit</BUTTON>
	</FORM>
</BODY>
</PRE>
				</DIV>
				<DIV CLASS="PageListContainer">
					<DIV CLASS="Page">
						<H2 CLASS="Title">Properties</H2>
						<DIV CLASS="PageItem">
							<A HREF="Properties/element/" CLASS="PageItemTitle">element</A>
							<CODE><EM>pi.element object</EM>.element
</CODE>
							<DIV CLASS="PageItemSummary">Returns a reference to the created DOM element.</DIV>
						</DIV>
					</DIV><DIV CLASS="Page">
						<H2 CLASS="Title">Methods</H2>
						<DIV CLASS="PageItem">
							<A HREF="Methods/clean/" CLASS="PageItemTitle">clean</A>
							<CODE><EM>element</EM>.clean();
</CODE>
							<DIV CLASS="PageItemSummary">Cleans up content of the specified element.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/clone/" CLASS="PageItemTitle">clone</A>
							<CODE><EM>element</EM>.clone(<EM>deep</EM>);
</CODE>
							<DIV CLASS="PageItemSummary">Returns a duplicate of the current node.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/insert/" CLASS="PageItemTitle">insert</A>
							<CODE><EM>element</EM>.insert(<EM>parentNode</EM>);
</CODE>
							<DIV CLASS="PageItemSummary">Insert the specified element as the last child node of given parent node.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/insertAfter/" CLASS="PageItemTitle">insertAfter</A>
							<CODE><EM>element</EM>.insertAfter(<EM>referenceNode</EM>);
</CODE>
							<DIV CLASS="PageItemSummary">Inserts the specified element after the reference node.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/insertBefore/" CLASS="PageItemTitle">insertBefore</A>
							<CODE><EM>element</EM>.insertBefore(<EM>referenceNode</EM>);
</CODE>
							<DIV CLASS="PageItemSummary">Inserts the specified element before the reference node.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/remove/" CLASS="PageItemTitle">remove</A>
							<CODE><EM>element</EM>.remove();
</CODE>
							<DIV CLASS="PageItemSummary">Removes the specified element from the DOM.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/update/" CLASS="PageItemTitle">update</A>
							<CODE><EM>element</EM>.remove();</CODE>
							<DIV CLASS="PageItemSummary">Sets all of the markup and content within given element.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/attribute.getAll/" CLASS="PageItemTitle">attribute.getAll</A>
							<CODE><EM>element</EM>.getAll();</CODE>
							<DIV CLASS="PageItemSummary">Returns a collection of attributes of the specified element.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/attribute.clear/" CLASS="PageItemTitle">attribute.clear</A>
							<CODE><EM>element</EM>.clear(<EM>attributeName</EM>);
</CODE>
							<DIV CLASS="PageItemSummary">Makes empty string the attribute.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/attribute.get/" CLASS="PageItemTitle">attribute.get</A>
							<CODE><EM>element</EM>.get(<EM>attributeName</EM>);
</CODE>
							<DIV CLASS="PageItemSummary">Returns the value of the named attribute on the specified element.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/attribute.has/" CLASS="PageItemTitle">attribute.has</A>
							<CODE><EM>element</EM>.has(<EM>attributeName</EM>);
</CODE>
							<DIV CLASS="PageItemSummary">Returns a boolean value indicating whether the specified element has the specified attribute or not.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/attribute.remove/" CLASS="PageItemTitle">attribute.remove</A>
							<CODE><EM>element</EM>.remove(<EM>attributeName</EM>);</CODE>
							<DIV CLASS="PageItemSummary">Removes an attribute from the specified element.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/attribute.addClass/" CLASS="PageItemTitle">attribute.addClass</A>
							<CODE><EM>element</EM>.addClass(<EM>Class, Names, ...</EM>);</CODE>
							<DIV CLASS="PageItemSummary">Adds the specified class(es) to each of the set of specified element.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/attribute.clearClass/" CLASS="PageItemTitle">attribute.clearClass</A>
							<CODE><EM>element</EM>.clearClass();</CODE>
							<DIV CLASS="PageItemSummary">Removes all class names of the specified element.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/attribute.getClass/" CLASS="PageItemTitle">attribute.getClass</A>
							<CODE><EM>element</EM>.getClass();</CODE>
							<DIV CLASS="PageItemSummary">Returns class names of the specified element.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/attribute.hasClass/" CLASS="PageItemTitle">attribute.hasClass</A>
							<CODE><EM>element</EM>.hasClass(<EM>className</EM>);</CODE>
							<DIV CLASS="PageItemSummary">Checks if the specified CSS class exists on the specified element's DOM node.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/attribute.setClass/" CLASS="PageItemTitle">attribute.setClass</A>
							<CODE><EM>element</EM>.setClass(<EM>value</EM>);</CODE>
							<DIV CLASS="PageItemSummary">Replaces value of className attribute with given value.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/attribute.removeClass/" CLASS="PageItemTitle">attribute.removeClass</A>
							<CODE><EM>element</EM>.removeClass(<EM>className</EM>);</CODE>
							<DIV CLASS="PageItemSummary">Removes the specified class of the specified element.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/attribute.toggleClass/" CLASS="PageItemTitle">attribute.toggleClass</A>
							<CODE><EM>element</EM>.toggleClass(<EM>className</EM>);</CODE>
							<DIV CLASS="PageItemSummary">Toggles the given CSS class on specified element.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/child.add/" CLASS="PageItemTitle">child.add</A>
							<CODE><EM>element</EM>.child.add( <EM>child, nodes ...</EM> );</CODE>
							<DIV CLASS="PageItemSummary">Adds the passed node(s) as a child to the specified element..</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/child.addAfter/" CLASS="PageItemTitle">child.addAfter</A>
							<CODE><EM>element</EM>.child.addAfter( <EM>node, referenceElement</EM> );</CODE>
							<DIV CLASS="PageItemSummary">Adds the passed node after a reference element as a child of the specified element.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/child.addBefore/" CLASS="PageItemTitle">child.addBefore</A>
							<CODE><EM>element</EM>.child.addBefore( <EM>node, referenceElement</EM> );</CODE>
							<DIV CLASS="PageItemSummary">Adds the passed node before a reference element as a child of the specified element.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/child.get/" CLASS="PageItemTitle">child.get</A>
							<CODE><EM>element</EM>.child.get();</CODE>
							<DIV CLASS="PageItemSummary">Returns a collection of child nodes.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/child.remove/" CLASS="PageItemTitle">child.remove</A>
							<CODE><EM>element</EM>.child.remove(<EM>child</EM>);</CODE>
							<DIV CLASS="PageItemSummary">Removes given child nodes.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/environment.getPosition/" CLASS="PageItemTitle">environment.getPosition</A>
							<CODE><EM>element</EM>.environment.getPosition();</CODE>
							<DIV CLASS="PageItemSummary">Returns an object that contains position data of the specified element.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/environment.getSize/" CLASS="PageItemTitle">environment.getSize</A>
							<CODE><EM>element</EM>.environment.getSize();</CODE>
							<DIV CLASS="PageItemSummary">Returns an object that contains dimensions of the specified element.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/environment.addStyle/" CLASS="PageItemTitle">environment.addStyle</A>
							<CODE><EM>element</EM>.environment.addStyle(<EM>{ <U>CSSProperty</U>:'<U>CSSValue</U>' }</EM>);</CODE>
							<DIV CLASS="PageItemSummary">Applies css values from given hash to specified element.(Fixes opacity values and cssFloat/styleFloat property for IE)</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/environment.getName/" CLASS="PageItemTitle">environment.getName</A>
							<CODE><EM>element</EM>.environment.getName();</CODE>
							<DIV CLASS="PageItemSummary">Returns node name of the specified element.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/environment.getType/" CLASS="PageItemTitle">environment.getType</A>
							<CODE><EM>element</EM>.environment.getType();</CODE>
							<DIV CLASS="PageItemSummary">Returns node type of the element.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/environment.getValue/" CLASS="PageItemTitle">environment.getValue</A>
							<CODE><EM>element</EM>.environment.getValue(<EM>element</EM>);</CODE>
							<DIV CLASS="PageItemSummary">Returns value of the given element.Input ve Textarea elementlerinin value attribute'unu, Select elementlerin secili option'inin degerini, geri kalanlarda innerHTML degerini dondurur.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/environment.getView/" CLASS="PageItemTitle">environment.getView</A>
							<CODE><EM>element</EM>.environment.getView(<EM>CSSProperty (Optional)</EM>);</CODE>
							<DIV CLASS="PageItemSummary">Returns computed style of the specified element.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/event.addListener/" CLASS="PageItemTitle">event.addListener</A>
							<CODE><EM>element</EM>.event.addListener(<EM>type</EM>,<EM>listener</EM>,<EM>useCapture?</EM>);</CODE>
							<DIV CLASS="PageItemSummary">Allows the registration of event listeners on the element.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/event.removeListener/" CLASS="PageItemTitle">event.removeListener</A>
							<CODE><EM>element</EM>.event.removeListener(<EM>type</EM>,<EM>listener</EM>,<EM>useCapture</EM>);</CODE>
							<DIV CLASS="PageItemSummary">Allows the removal of event listeners from the element.</DIV>
						</DIV>
					</DIV>
				</DIV>
				<DIV CLASS="Block">
					<H1>Examples</H1>
					<DIV CLASS="Example">
						<H1>Example #1: Create a simple login form dynamically.</H1>
							<DIV CLASS="View">
								<DIV ID="f_container">
</DIV><SCRIPT SRC="loginform.js" TYPE="text/javascript"></SCRIPT>
							</DIV>
							<H2>Source files of the above example:</H2>
							<DIV>
								<H3>loginform.html</H3>
								<PRE NAME="code" CLASS="html">&lt;div id="f_container">
&lt;/div></PRE>
							</DIV><DIV>
								<H3>loginform.js</H3>
								<PRE NAME="code" CLASS="js">var form = new pi.element("form").attribute.set("method","POST").insert(pi.get("f_container"));
var username = new pi.element("input").insertAfter(
	new pi.element("label").update("Username: ").insert(form)
);
var password = new pi.element("input").insertAfter(
	new pi.element("label").update("Password: ").insert(form)
);
form.child.add(
	new pi.element("button").update("login")
);</PRE>
							</DIV>
					</DIV><DIV CLASS="Example">
						<H1>Example #2: table</H1>
							<DIV CLASS="View">
								<DIV ID="table_container">
</DIV><SCRIPT SRC="table.js" TYPE="text/javascript"></SCRIPT>
							</DIV>
							<H2>Source files of the above example:</H2>
							<DIV>
								<H3>table.html</H3>
								<PRE NAME="code" CLASS="html">&lt;div id="table_container">
&lt;/div></PRE>
							</DIV><DIV>
								<H3>table.js</H3>
								<PRE NAME="code" CLASS="js">new pi.element("table").child.add(
	new pi.element("tr").child.add(
		new pi.element("td").update("Name"),
		new pi.element("td").update("Age")
	),
	new pi.element("tr").child.add(
		new pi.element("td").update("Angeline"),
		new pi.element("td").update("25")
	)
).attribute.set("border","1").insert(pi.get("table_container"));</PRE>
							</DIV>
					</DIV>
				</DIV>
			</DIV>
		</DIV>
		<DIV CLASS="Clean"></DIV>
	</BODY> 
</HTML>